<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <!--引入vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <style>
    /*v-cloak可以让{{}}表达式未加载到数据时不显示，网速不好时不设置该属性会导致显示的是表达式*/
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<!--vm 将控制这块区域， view -->
<div id="app">
  <!--vm中的数据 v-cloak方式网速导致插值表达式显示出来的问题 -->
    <p v-cloak>{{ message }} hi abc</p>
  <!--通过v-text也可以避免插值表达式被显示的问题， v-text会替换标签内所有内容只剩v-text替换内容，{{}}表达式不会-->
  <p v-text="message">hi abc</p>
  <!--会把字符串转为html-->
  <p v-html="message">hi abc</p>

  <!--v-bind绑定原生属性， 绑定后的值可以使用js表达式-->
  <input type="text" v-bind:value="message + 'A'"></input>
  <!--v-bind简写-->
  <input type="text" :value="message"></input>

  <!--v-on点击事件绑定-->
  <input type="button" value="btn" v-on:click="hello"></input>
  <!--v-on 的缩写-->
  <input type="button" value="btn" @click="hello"></input>
</div>

<script>
    // vm viewModel , mvvm, model view viewModel， viewModel是桥梁
    var vm = new Vue({
        el: '#app',
      // model 对应 mvvm 中的m, 数据对象
        data: {
            message: '<h4>Hello Vue.js!</h4>'
        },
      methods: {
          hello: function() {
            alert('hello');
          }
      }
    })
</script>
</body>
</html>
